<template>
  <div id="app">
    <logo-component></logo-component>
    <phone-component ref="message"></phone-component>
    <code-component :isLogin="isLogin"></code-component>
    <!-- 登录 -->
    <div class="LOGIN">
      <!-- 登录按钮 -->
      <el-button type="warning" round @click="Login">登录</el-button><br>
      <!-- 其他登录方式 -->
      <router-link id="login-tag" class="login-alter" to="/Login2"> {{tag1}} </router-link>
      <span id="login-tag">   |    </span>
      <router-link id="login-tag" class="login-regist" to="/regist"> {{tag2}} </router-link>
    </div>
    <other-component></other-component>
  </div>
</template>

<script>
import OtherComponent from './subComponent/Other.vue'
import LogoComponent from './subComponent/Logo.vue'
import PhoneComponent from './subComponent/Phone.vue'
import CodeComponent from './subComponent/Code.vue'
export default {
  name: 'login',
  data () {
    return {
      tag1: '账号密码登陆',
      tag2: '注册新用户',
      isLogin: false
    }
  },
  methods: {
    Login () {
      console.log('验证码传入后端比较')
      console.log('|')
      // 假定登录失败，因为要演示注册
      // this.isLogin = true
      this.$router.replace({ path: '/Main' })
    }
  },
  created () {
    console.log('程序开始运行')
    console.log('|')
  },
  watch: {
  //   // 监听电话号码的数值是否为11位
  //   phoneNumber: function (newVal) {
  //     if (newVal.length === 11) {
  //       this.isPhoneWrong = false
  //     }
  //   },
  //   // 监听验证码修改
  //   codeNumber: function (newVal) {
  //     if (newVal.length !== 0) {
  //       this.isCodeWrong = false
  //     }
  //   }
  },
  components: {
    OtherComponent,
    LogoComponent,
    PhoneComponent,
    CodeComponent
  }
}
</script>
<style lang="scss">
input:focus {
  width: 70%;
  border-bottom: 2px solid CornflowerBlue;
  border-top:0px;
  border-left:0px;
  border-right:0px;
  z-index: 999;
}
.LOGIN {
  text-align: center;
  margin-bottom: 100px;
  button {
    margin-top: 40px;
    width: 60%;
    margin-bottom: 20px;
    background: #E9BD7A;
  }
  #login-tag {
    font-family: 微软雅黑;
    font-size: 10px;
    font-weight: bold;
    color: cornflowerblue;
    margin: 5px
  }
}
</style>
